<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件，包含主标题和副标题
                text: '20040180宋金玲',
                subtext: '2001班',
                //left: 100, top: 5
            },
            tooltip: {},
            legend: {  //配置图例组件，一个echarts图表中可以存在多个图例组件
            },
            toolbox: {  //配置工具箱组件
				x: 400, show: true,
				feature: {
					mark: { show: true },
					dataZoom: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},   
			 grid: {  //配置grid区域
                show: true ,  //设置是否显示直角坐标系网格
                top: 80,  //设置相对位置，top\bottom\left\right
                containLabel: true ,  //设置grid区域是否包含坐标轴的刻度标签
                tooltip: {  //鼠标焦点放在图形上，产生的提示框
                    show: true,
                    trigger: 'item',  //设置触发类型
                    textStyle: {
                        color: '#fff666',  //设置提示框文字的颜色
                    }
                }
            },
            xAxis: { 
            	//配置x轴坐标系
            	
                data: ["黄著", "刘旺坚", "蔡铭浪", "胥玉英", "古旭高", "刘倩","Alex","宋金玲"]
            },
            yAxis: {},  //配置y轴坐标系
            series: [{  //配置系列列表，每个系列通过type控制该系列图表类型
                name: '销量',
                type: 'bar',  //设置柱状图
                data: [
                	   {value:85,url:"词云图.html"},
                	   {value:85,url:"代码pie.html"},
                	   {value:80,url:"多仪表图.html"}, 
                	   {value:85,url:"矩形树图.html"},
                	   {value:85,url:"雷达图.html"},
                	   {value:82,url:"漏斗图.html"},
                	   {value:90,url:"气泡图.html"},
                	   {value:85,url:"散点图.html"}
                	   ]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        
        myChart.on('mousedown', function (params) {
			//var yt = alert("鼠标单击事件,您刚才单击了:" + params.name);
			var a=myChart.getModel().option.series[0].data[params.dataIndex].url;
			window.open(a);		
		});
    </script>
</body>

</html>